import React, { Component } from 'react'
import './AdminNews.less'
import { Table,Card,Button,Icon,Input,Popconfirm,Spin,message } from 'antd';
import { connect } from 'react-redux'
import {Link} from 'react-router-dom'
import {getNews,deleteNews} from "../../../redux/action/admin/adminNews"

export class AdminNews extends Component {
    constructor(props){
        super(props);
        this.state = {
            newsList: [],
            newsTotal: 0,
            id:0,
        }
    }
    componentDidMount(){
      console.log('hsh')
        this.props.dispatch(getNews({
            page: 1,
            rows: 5
        })).then(() => {
            console.log(this.props.adminNews)
            if(this.props.adminNews.adminNews !== undefined){
                if(this.props.adminNews.adminNews.data !== null){
                  this.setState({
                    newsList: this.props.adminNews.adminNews.data.pagingList,
                    newsTotal: this.props.adminNews.adminNews.data.total
                })
              }
            }

        })
        
        
    }
    /**
     * 请求新一页的新闻
     */
    getNews = (page) => {
      this.props.dispatch(getNews({
        page: page,
        rows: 5,
      })).then(()=>{
        if(this.props.adminNews.adminNews !== undefined){
          this.setState({
              newsList: this.props.adminNews.adminNews.data.pagingList,
              newsTotal: this.props.adminNews.adminNews.data.total
          })
      }
      })
    }
    /**
     * 获取要删除的xinwid
     * @param ids 
     */
    checkDelete = ids =>{
      this.setState({
        id:ids
      })
    }

    deleteNews = () => {
      if(this.state.id){
        this.props.dispatch(deleteNews({
          ids: this.state.id
        })) 
        message.success('删除新闻成功');
        setTimeout(()=>window.location.reload(),1000);
      }else{
        message.info('请输入您要删除的部分')
      }

    }

    render() {
              /**table数据样式 */
              const columns = [
                {
                  title: 'ID',
                  dataIndex: 'key',            
                },
                {
                  title: '新闻名称',
                  dataIndex: 'title',
                },
                {
                  title: '发布时间',
                  dataIndex: 'time'
                },
                {
                  title: '作者',
                  dataIndex: 'author'
                },
                {
                  title: '更多操作',
                  render: (record)=>(
                    
                  <div>
                    <span style={{cursor:"pointer"}}>
                      <Link to={`/admin/updatenews/${record.id}`}><Icon type="edit" style={{ fontSize: '20px', color: '#08c' }}/></Link></span>
                   <span onClick={()=>this.checkDelete(record.id)}>
                   <Popconfirm placement="rightBottom" title={"你确定要删除这条新闻么"} okText="确定" cancelText="取消" onConfirm={this.deleteNews}>
                     <Icon type="delete" style={{ fontSize: '20px', color: '#D94A38', marginLeft:'5%'}}  /></Popconfirm></span> 
                  </div>)
                },
              ];  
            /**列表索引 */  
            const dataSource = [];
            if(this.state.newsList.length > 0){
                for(let i = 0;i < this.state.newsList.length;i++){
                    dataSource.push({
                        key: i + 1,
                        author:  this.state.newsList[i].news.author,
                        content:  this.state.newsList[i].news.content,
                        id:  this.state.newsList[i].news.id,
                        time:  this.state.newsList[i].news.pubTime,
                        title:  this.state.newsList[i].news.title,
                        picUrls:  this.state.newsList[i].picUrls
                    })
                }
            }
            /**
             * tables
             */
            let tables = []
            this.state.newsTotal > 0 ? tables.push( <Table  columns={columns} dataSource={dataSource} 
              pagination={{onChange:(page) => this.getNews(page),pageSize:5,total:this.state.newsTotal}} key='dataSource'/>)
                : tables.push(<Spin size="large" key='dataSource'/>)

    return(
            <div className='admin-news'>
                <Card title="新闻管理">
                    <div className="admin-news-head">
                      <Link to='/admin/addnews'><Button type="primary" style={{background:'green'}} onClick={this.submitCate}><Icon type="plus" />添加</Button></Link>
                      <div className="categroy-head-right">共有 {this.state.newsTotal} 条数据233</div>
                    </div>
                    {tables}
                </Card>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {adminNews:state.adminNews}; 
}

AdminNews = connect(mapStateToProps)(AdminNews)

export default AdminNews
